<template>
<!-- ACS给药 -->
    <div >
        <div class="header">
            <div class="header-left" @click="finish"><image :src="titleUrl" class="header-left-img"></image></div>
            <div class="header-center"><text class="header-text">ACS给药</text></div>
            <div class="header-right" @click="save" v-if="canSave"><text class="header-right-text">保存</text></div>
            <div class="header-right-s"  v-if="! canSave"></div>
        </div>
        <div class="content">
            <div class="box">
                <div class="line">
                    <div class="title"><text class="box-text">抗血小板给药时间:</text></div>
                    <div class="input" @click="getTime('ACS_DELIVERY_TIME')">
                        <text class="input-text">{{resData.ACS_DELIVERY_TIME | filterTime}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
                <div class="line">

                </div>
            </div>
            <div class="box">
                <div class="title"><text class="box-text">给药名称及剂量:</text></div>
                <div class="checkbox" :class="[resData.ACS_DRUG_TYPE==1?'box-active':'']" @click="ISChecked('ACS_DRUG_TYPE',1)"><text class="checkbox-text" :class="[resData.ACS_DRUG_TYPE==1?'box-text-active':'']">氯吡格雷</text></div>
                <div class="checkbox mf-10" :class="[resData.ACS_DRUG_TYPE==2?'box-active':'']" @click="ISChecked('ACS_DRUG_TYPE',2)"><text class="checkbox-text" :class="[resData.ACS_DRUG_TYPE==2?'box-text-active':'']">替格瑞洛</text></div>
                <div class="input-mini">
                    <input type="tel" class="input-text" v-model="resData.ACS_DRUG_DOSE" v-if="canSave"></input>
                    <text type="tel" class="input-text" v-if="!canSave">{{resData.ACS_DRUG_DOSE}}</text>
                    <text class="input-unit">mg</text>
                </div>
            </div>
            <div class="box">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[ASPIRIN_DOSE==1?'box-active':'']" @click="isASPIRIN"><text class="checkbox-text" :class="[ASPIRIN_DOSE==1?'box-text-active':'']">阿司匹林</text></div>
                <div class="input-mini">
                    <input type="tel" class="input-text" v-model="resData.ASPIRIN_DOSE" v-if="canSave"></input>
                    <text type="tel" class="input-text" v-if="! canSave">{{resData.ASPIRIN_DOSE}}</text>
                    <text class="input-unit">mg</text>
                </div>

            </div>
            <div class="box">
                <div class="title"><text class="box-text">首次抗凝给药:</text></div>
                <div class="checkbox" :class="[resData.IS_ANTICOAGULATION==1?'box-active':'']" @click="ISChecked('IS_ANTICOAGULATION',1)"><text class="checkbox-text" :class="[resData.IS_ANTICOAGULATION==1?'box-text-active':'']">有</text></div>
                <div class="checkbox mf-10" :class="[resData.IS_ANTICOAGULATION==2?'box-active':'']" @click="ISChecked('IS_ANTICOAGULATION',2)"><text class="checkbox-text" :class="[resData.IS_ANTICOAGULATION==2?'box-text-active':'']">无</text></div>
            </div>
            <div class="box" v-if="resData.IS_ANTICOAGULATION==1">
                <div class="line">
                    <div class="title"><text class="box-text">首次抗凝给药时间:</text></div>
                    <div class="input" @click="getTime('ANTICOAGULATION_DATE')">
                        <text class="input-text">{{resData.ANTICOAGULATION_DATE | filterTime}}</text>
                        <image :src="imgUrl" class="img-unit"></image>
                    </div>
                </div>
                <div class="line">
                    <div class="title"><text class="box-text">首次抗凝给药药物:</text></div>
                    <div class="input" @click="ANTICOAGULATION_DRUG=!ANTICOAGULATION_DRUG" v-if="canSave">
                        <text class="input-text">{{ANTICOAGULATION_DRUG_title}}</text>
                    </div>
                    <div class="input" v-if="! canSave">
                        <text class="input-text">{{ANTICOAGULATION_DRUG_title}}</text>
                    </div>
                </div>
            </div>
            <div class="box" v-if="ANTICOAGULATION_DRUG && canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.ANTICOAGULATION_DRUG==1?'box-active':'']" @click="ISChecked('ANTICOAGULATION_DRUG',1),ANTICOAGULATION_DRUG_title='普通肝素',ANTICOAGULATION_DRUG=false"><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==1?'box-text-active':'']">普通肝素</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==2?'box-active':'']" @click="ISChecked('ANTICOAGULATION_DRUG',2),ANTICOAGULATION_DRUG_title='低分子肝素',ANTICOAGULATION_DRUG=false"><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==2?'box-text-active':'']">低分子肝素</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==3?'box-active':'']" @click="ISChecked('ANTICOAGULATION_DRUG',3),ANTICOAGULATION_DRUG_title='比伐卢定',ANTICOAGULATION_DRUG=false"><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==3?'box-text-active':'']">比伐卢定</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==4?'box-active':'']" @click="ISChecked('ANTICOAGULATION_DRUG',4),ANTICOAGULATION_DRUG_title='磺达肝癸钠',ANTICOAGULATION_DRUG=false"><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==4?'box-text-active':'']">磺达肝癸钠</text></div>
            </div>
            <div class="box" v-if="ANTICOAGULATION_DRUG && ! canSave">
                <div class="title"><text class="box-text"></text></div>
                <div class="checkbox" :class="[resData.ANTICOAGULATION_DRUG==1?'box-active':'']" ><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==1?'box-text-active':'']">普通肝素</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==2?'box-active':'']" ><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==2?'box-text-active':'']">低分子肝素</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==3?'box-active':'']" ><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==3?'box-text-active':'']">比伐卢定</text></div>
                <div class="checkbox mf-10" :class="[resData.ANTICOAGULATION_DRUG==4?'box-active':'']" ><text class="checkbox-text" :class="[resData.ANTICOAGULATION_DRUG==4?'box-text-active':'']">磺达肝癸钠</text></div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title-auto"><text class="box-text">首次抗凝给药剂量含单位:</text></div>
                    <div class="input">
                        <input type="text" class="input-text" v-model="resData.ANTICOAGULATION_UNIT" v-if="canSave"></input>
                        <text type="text" class="input-text" v-if="! canSave">{{resData.ANTICOAGULATION_UNIT}}</text>
                    </div>
                </div>
                <div class="line">

                </div>
            </div>
            <div class="box">
                <div class="line">
                    <div class="title-mini"></div>
                    <div class="checkbox-auto" :class="[resData.INTENSIFY_STATINS_TREAT==1?'box-active':'']" @click="reverse('INTENSIFY_STATINS_TREAT')"><text class="checkbox-text" :class="[resData.INTENSIFY_STATINS_TREAT==1?'box-text-active':'']">24小时强化他汀治疗</text></div>
                </div>
                <div class="line">
                    <div class="title-mini"></div>
                    <div class="checkbox-auto mf-10" :class="[resData.RECEPTOR_RETARDANT_USING==1?'box-active':'']" @click="reverse('RECEPTOR_RETARDANT_USING')"><text class="checkbox-text" :class="[resData.RECEPTOR_RETARDANT_USING==1?'box-text-active':'']">ß受体阻滞剂使用</text></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import WeexNativeModule from "../../common/WeexNativeModule"
    import DateUtil from "../../common/util/DateUtil"
    import StringUtils from "../../common/util/StringUtils"
    import ACApi from "../../common/http/ACApi"
    import Resource from "../../../dist/res/Resource"
    import JsonFilter from "../../common/util/JsonFilter"
    export default {
        name: 'EMNewMainEditInfo',
        data: function () {   
            return {
                currentTab: '',
                bannerLists: '',
                newPage: true,
                info: {
                    orgCode: '',
                    doctorId: '',
                    doctor: '',
                    orderId: '',
                    pid: '',
                    carOutId: ''
                },
                titleUrl:'title_cha_img.png',
                imgUrl: 'choose.png',
                ASPIRIN_DOSE: false,
                ANTICOAGULATION_DRUG: false,
                ANTICOAGULATION_DRUG_title: '',
                resData: {                   
                    ACS_DRUG_TYPE:'',
                    IS_ANTICOAGULATION:'',
                    ANTICOAGULATION_DRUG:'',    
                    ACS_DELIVERY_TIME: '',
                    ACS_DRUG_DOSE: '',
                    ASPIRIN_DOSE: '',
                    ANTICOAGULATION_DATE: '',
                    ANTICOAGULATION_UNIT: '',
                    INTENSIFY_STATINS_TREAT:'',
                    RECEPTOR_RETARDANT_USING:'',    
                },
                canSave:true
            }                                                     
        },
        mounted: function() {
            let _this = this;
            WeexNativeModule.getLoginUser(function (data) {
                let loginUser = JSON.parse(data.loginUser);
                _this.info.orgCode = loginUser.orgid;
                _this.info.doctorId = loginUser.id;
                _this.info.doctor = loginUser.username               
            });
            WeexNativeModule.getParam(function (data) {
                let param = JSON.parse(data.param);
//                WeexNativeModule.alert(param);
                if(param.isJustOpen){
                    _this.canSave = false;
                    let data = JSON.parse(param.data);
                    let content =JSON.parse(data.content);
                    _this.resData.ACS_DRUG_TYPE = content.ACS_DRUG_TYPE;
                    _this.resData.IS_ANTICOAGULATION = content.IS_ANTICOAGULATION;
                    _this.resData.ANTICOAGULATION_DRUG = content.ANTICOAGULATION_DRUG;
                    if(content.ANTICOAGULATION_DRUG){
                        _this.ANTICOAGULATION_DRUG = true;
                        if(content.ANTICOAGULATION_DRUG == 1){
                            _this.ANTICOAGULATION_DRUG_title='普通肝素'
                        }
                        if(content.ANTICOAGULATION_DRUG == 2){
                            _this.ANTICOAGULATION_DRUG_title='低分子肝素'
                        }
                        if(content.ANTICOAGULATION_DRUG == 3){
                            _this.ANTICOAGULATION_DRUG_title='比伐卢定'
                        }
                        if(content.ANTICOAGULATION_DRUG == 4){
                            _this.ANTICOAGULATION_DRUG_title='磺达肝癸钠'
                        }
                    }
                    _this.resData.ACS_DELIVERY_TIME = content.ACS_DELIVERY_TIME;
                    _this.resData.ACS_DRUG_DOSE = content.ACS_DRUG_DOSE;
                    _this.resData.ASPIRIN_DOSE = content.ASPIRIN_DOSE;
                    _this.resData.ANTICOAGULATION_DATE = content.ANTICOAGULATION_DATE;
                    _this.resData.ANTICOAGULATION_UNIT = content.ANTICOAGULATION_UNIT;
                    _this.resData.INTENSIFY_STATINS_TREAT = content.INTENSIFY_STATINS_TREAT;
                    _this.resData.RECEPTOR_RETARDANT_USING = content.RECEPTOR_RETARDANT_USING;
                }else {
                    _this.canSave = true;
                    _this.info.orderId = param.taskcode;
                    _this.info.carOutId = param.caroutid;
                    _this.info.pid = param.pid;
                }
            })
        },
        filters: {
            filterTime: function(item) {
                if(item) {
                    let time = DateUtil.formatTime(item,'yyyy-MM-dd hh:mm')
                    return time
                }
            }
        },
        methods: {
            ISChecked: function (key,value) {
                if(! this.canSave){
                    return
                }
                this.resData[key] = this.resData[key] && this.resData[key] === value  ? '' : value
                if(key == 'ACS_DRUG_TYPE'&&this.resData[key] ==2) {
                    this.resData.ACS_DRUG_DOSE = 180
                }else if(key == 'ACS_DRUG_TYPE'&&this.resData[key] == '') {
                    this.resData.ACS_DRUG_DOSE = ''
                }
                if(key == 'ACS_DRUG_TYPE'&&this.resData[key] ==1) {
                    this.resData.ACS_DRUG_DOSE = ''
                }
            },
            finish: function() {
                WeexNativeModule.finish()
            },
            reverse: function (key){
                if(! this.canSave){
                    return
                }
                this.resData[key] = this.resData[key] && this.resData[key] != 0 ? 0 : 1;
            },
            isASPIRIN: function () {
                if(! this.canSave){
                    return
                }
                this.ASPIRIN_DOSE = this.ASPIRIN_DOSE && this.ASPIRIN_DOSE != 0 ? 0 : 1;
                this.resData.ASPIRIN_DOSE = this.ASPIRIN_DOSE == 1 ? 300 : ''
            },
            getTime: function(type) {
                if(! this.canSave){
                    return
                }
                let _this = this;
                let defaultdate;
                let typeTime;
                for(let key in _this.resData) {
                    if(key == type) {
                        typeTime = _this.resData[key]
                    }
                }
                if(!StringUtils.isEmpty(typeTime)){
                    defaultdate = DateUtil.formatTime(
                        new Date(_this.tourniquetTime),'yyyy-MM-dd hh:mm');
                }else {
                    defaultdate = DateUtil.formatTime(
                        new Date(),'yyyy-MM-dd hh:MM');
                }
                WeexNativeModule.selectDateTime(defaultdate,false,true,true,true,true,false,false,"","",function(time) {
                    for(let key in _this.resData) {
                        if(key == type) {
                            _this.resData[key] = DateUtil.formatTime(time.data,'yyyy-MM-dd hh:mm')
                        }
                    }
                })
            },
            save: function() {
                if(! this.canSave){
                    return
                }
                let _this = this;
                let json = JsonFilter.filter(_this.resData);
                let postjson = {
                    'content': JSON.stringify(json),
                    'doctor': _this.info.doctor,
                    'doctorId': _this.info.doctorId,
                    'orderId': _this.info.orderId,
                    'orgCode': _this.info.orgCode,
                    'pid': _this.info.pid,
                    'carOutId': _this.info.carOutId ? _this.info.carOutId :''
                };
                WeexNativeModule.addEMNode(JSON.stringify(postjson))
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #FFF;
        display: flex;
        flex-direction: row;
        justify-content: space-between;    
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 0.5px;
        border-bottom-color: #f2f2f2;
    }
    .header-left {
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }
    .header-left-img {
        width: 30px;
        height: 30px;
        margin-left: 15px;
    }
    .header-right {
        width: 80px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;  
        border-radius: 2px;     
    }
    .header-text {
        font-size: 13px;
        color: #666;
    }
    .header-right-text {
        font-size: 13px;
        color: #FFF;
        text-align: center;
        line-height: 25px;       
    }
    .banner-tab {  
        width: 760px;      
        height: 30px;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #f2f2f2;
        padding-left: 5px;
        padding-right: 5px;
              
    }
    .tab {
        width: 80px;
        height: 30px;
        display: flex;
        justify-content: center; 
        margin-left: 5px;
        margin-right: 5px;
        border-bottom-style: solid;
        border-bottom-width: 0;
        border-bottom-color: #FFF;
    }
    .tab-text {
        text-align: center;
        font-size: 12px;
        color: #666;
    }
    .tab-active {
        border-bottom-style: solid;
        border-bottom-width: 2px;
        border-bottom-color: #4c7fd8;
    }
    .content {
        padding-left: 40px;
        padding-right: 40px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }
    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;   
        height: 40px;
        align-items: center;
    }
    .box-text {
        font-size: 12px;
        color: #666;
    }
    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }
    .title {
        width: 120px;
    }
    .title-auto {
        margin-right: 20px;
    }
    .title-mini {
        width: 50px;
    }
    .input {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }
    .input-mini {        
        position: relative;
        width: 100px;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;       
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        margin-left: 10px;
    }
    .input-unit {
        position: absolute;
        color: #666;
        font-size: 12px;
        top: 4px;
        right: 8px;
    }
    .input-text {  
        color: #666;
        line-height: 22px;     
        font-size: 12px;
    }
    .checkbox {
        width: 87px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-auto {
        width: 160px;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;        
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .checkbox-text {
        font-size: 12px;
        color: #666;
    }   
    .mf-10 {
        margin-left: 10px;
    }
    .line-bottom {
        flex: 1;
        height: 25px;        
        background-color: #f2f2f2;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box-active {
        background-color: #4c7fd8;
    }
    .box-text-active {
        color: #FFF;
    }
    .img-unit {
        position: absolute;                  
        top: 3px;
        right: 5px;
        width: 8px;
        height: 16px;
    }
</style>

